<template>
    <!--list-content-->
    <div class="main">
        <div class="py-container">
            <!--bread-->
            <Bread :queryTags="queryTags" @clear="removeQuery"></Bread>
            <!--selector-->
            <Attribute :attrs-list="attrsList" :trademark-list="trademarkList"></Attribute>
            <!--details-->
            <SearchDetail :goods-list="goodsList"></SearchDetail>
            <Pagination v-bind="pageOptions" @change-page="changePage"></Pagination>
            <!--hotsale-->
            <HotSale></HotSale>
        </div>
    </div>
</template>
<script lang="ts" name="ListContent" setup>
import Bread from "@/pages/Search/Bread.vue";
import Attribute from '@/pages/Search/Attribute.vue';
import SearchDetail from './details/Details.vue';
import HotSale from "./HotSale.vue";
import {computed, inject, provide, reactive, watch} from 'vue';
import {useRoute, useRouter} from "vue-router";
import Pagination from "@/components/Pagination/index.vue";

const route = useRoute();
const router = useRouter();
let queryTags = reactive<{ [param: string]: any }>({});

let queryParams = inject('queryParams') as any

const props = defineProps<{
    data: any
}>()

watch(route, () => {
    let query = route.query;
    Object.getOwnPropertyNames(queryTags).forEach(key => delete queryTags[key])
    query.categoryName && (queryTags.categoryName = query.categoryName);
    query.keyword && (queryTags.keyword = query.keyword);
}, {immediate: true})
const goodsList = computed(() => {
    return props.data.goodsList || []
})
const trademarkList = computed(() => {
    return props.data.trademarkList || []
})
const attrsList = computed(() => {
    return props.data.attrsList || []
})
const pageOptions = computed(() => {
    return {
        total: props.data.total || 0,
        totalPages: props.data.totalPages || 0,
        pageSize: props.data.pageSize,
        pageNo: props.data.pageNo
    }
})

/**
 * 改变页数
 * @param pageNo
 */
function changePage(pageNo: number) {
    if (pageNo > props.data.totalPages) {
        return;
    }
    if (pageNo < 1) {
        return;
    }
    queryParams.pageNo = pageNo;
}

function removeQuery(tag: string) {
    let query = {...route.query};
    if (tag === 'categoryName') {
        delete query.categoryName;
        delete query.category1Id;
        delete query.category2Id;
        delete query.category3Id;
        router.push({name: <string>route.name, query})
    } else if (tag === 'keyword') {
        delete query.keyword;
        router.push({name: <string>route.name, query})
    } else {
        delete queryTags[tag];
        if (tag.startsWith('brand-')) {//移除品牌
            queryParams.trademark = undefined;
        } else if (tag.startsWith('attr-')) {//移除属性筛选
            let attr = tag.replace('attr-', '');
            queryParams.props = queryParams.props?.filter((item: string) => !item.startsWith(attr))

        }
    }
}

/**
 * 添加品牌查询条件
 * @param brand
 */
function addBrandQuery(brand: any) {
    queryTags[`brand-${brand.tmId}`] = brand.tmName;
    queryParams.trademark = `${brand.tmId}:${brand.tmName}`;
}

/**
 * 添加属性查询条件
 * @param attr
 * @param attrValue
 */
function addAttrQuery(attr: any, attrValue: any) {
    queryTags[`attr-${attr.attrId}:${attrValue}`] = attrValue;
    if (!queryParams.props) {
        queryParams.props = [];
    }
    const att = `${attr.attrId}:${attrValue}:${attr.attrName}`;
    let props = queryParams.props;
    !props.includes(att) && props.push(att);//避免重复添加
}

provide('addBrandQuery', addBrandQuery);
provide('addAttrQuery', addAttrQuery)
</script>

<style lang="less" scoped>
.main {
    margin: 10px 0;

    .py-container {
        width: 1200px;
        margin: 0 auto;
    }
}
</style>
